<template>
  <div class="exhibition">
    <div class="bread-line">
      <span>当前：开发中心&nbsp;/&nbsp;</span>
      <span class="link">应用搭建</span>
    </div>
    <div class="banner">
      <div class="text-box">
        <div class="b-title">业务应用快速搭建</div>
        <div class="p-box">
          <p>调查监测全流程业务定制</p>
          <p> 一张图对比展示业</p>
          <p>大屏可视化支撑业务决策</p>
        </div>
        <el-button type="primary"
          @click="jump">快速搭建</el-button>
      </div>
      <img class="img"
        src="@/assets/image/bus-img/banner.png"
        alt="">
      <img class="inner-img"
        src="@/assets/image/bus-img/banner-inner.png"
        alt="">
    </div>
    <div class="business-chain">
      <div class="bc-title">覆盖调查监测全流程业务链条</div>
      <div class="chain-node">
        <div class="node-img">
          <img src="@/assets/image/bus-img/sjhj.png"
            alt="">
          <div class="node-text">数据汇集</div>
        </div>
        <img class="node-img"
          src="@/assets/image/bus-img/left-arrow.png"
          alt="">
        <div class="node-img">
          <img src="@/assets/image/bus-img/znfx.png"
            alt="">
          <div class="node-text">智能分析</div>
        </div>
        <img class="node-img"
          src="@/assets/image/bus-img/left-arrow.png"
          alt="">
        <div class="node-img">
          <img src="@/assets/image/bus-img/rwpz.png"
            alt="">
          <div class="node-text">任务配置</div>
        </div>
        <img class="node-img"
          src="@/assets/image/bus-img/left-arrow.png"
          alt="">
        <div class="node-img">
          <img src="@/assets/image/bus-img/wydc.png"
            alt="">
          <div class="node-text">外业调查</div>
        </div>
        <img class="node-img"
          src="@/assets/image/bus-img/left-arrow.png"
          alt="">
        <div class="node-img">
          <img src="@/assets/image/bus-img/tjzs.png"
            alt="">
          <div class="node-text">统计展示</div>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="i-title">高度自由定制，满足各类业务需求</div>
      <img class="i-img"
        src="@/assets/image/bus-img/banner2.png"
        alt="">
      <div class="section">
        <div class="text-wrap">
          <div class="text-item">
            <p class="sub-title">自定义任务字段</p>
            <div class="text">支持用户自定义配置任务信息，包括WEB、APP端任务字段的展示与编辑</div>
          </div>
          <div class="text-item">
            <p class="sub-title">自定义审核流程</p>
            <div class="text">支持用户自定义配置审核信息，包括是否复核、审核字段配置和配置打回操作</div>
          </div>
          <div class="text-item">
            <p class="sub-title">自定义任务用户</p>
            <div class="text">支持用户自定义配置用户，包括任务管理员、作业员、审核员</div>
          </div>
        </div>
        <img class="pos-img"
          src="@/assets/image/bus-img/computer.png"
          alt="">
        <div class="text-wrap">
          <div class="text-item">
            <p class="sub-title">云查询</p>
            <div class="text">支持用户快速识别违法图斑，并进行拍照举证</div>
          </div>
          <div class="text-item">
            <p class="sub-title">随手拍</p>
            <div class="text">支持用户自定义配置任务信息，包括WEB、APP端任务字段的展示与编辑</div>
          </div>
          <div class="text-item">
            <p class="sub-title">工作圈</p>
            <div class="text">工作圈由消息列表、通讯录和我的个人中心三部分组成，通过底部切换进行展示，右上角可快速添加好友、创建工作组</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flow">
      <div class="f-title">简洁的应用构建，实现即搭即用</div>
      <div class="f-sub-title">通过简单界面配置，能够实现调查监测举证应用的快速搭建，支撑专项业务推进，例如退耕还林、生态保护等</div>
      <el-button type="primary">快速搭建</el-button>
      <div class="step">
        <div class="step-node"
          v-for="(step, i) in steplist"
          :key="step.num">
          <span class="num-icon">{{step.num}}</span>
          <span class="num-label">{{step.label}}</span>
          <span class="line"
            v-if="i+1<steplist.length"></span>
        </div>
      </div>
    </div>
    <div class="cases">
      <div class="c-title">简洁的应用构建，实现即搭即用</div>
      <div class="grid-wrap">
        <div class="card">
          <img class="img"
            src="@/assets/image/bus-img/case.png"
            alt="">
          <div class="card-text">渝耕保监管系统</div>
        </div>
        <div class="card">
          <img class="img"
            src="@/assets/image/bus-img/case.png"
            alt="">
          <div class="card-text">规划和自然资源常规监测系统</div>
        </div>
        <div class="card">
          <img class="img"
            src="@/assets/image/bus-img/case.png"
            alt="">
          <div class="card-text">开发利用监测监管系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        steplist: [
          {
            num: 1,
            label: '填写基本信息'
          },
          {
            num: 2,
            label: '选择业务模块'
          },
          {
            num: 3,
            label: '个性化界面配置'
          },
          {
            num: 4,
            label: '按需配置业务'
          },
          {
            num: 5,
            label: '配置业务用户'
          },
          {
            num: 6,
            label: '预览及发布'
          }
        ]
      };
    },
    methods: {
      jump() {
        this.$router.push({ path: '/appbuild' });
      }
    }
  };
</script>

<style scoped lang="scss">
  .exhibition {
    width: 100%;
    .bread-line {
      padding: 20px 0;
      margin-left: 240px;
      .link {
        color: $--primary-color;
      }
    }
    .banner {
      position: relative;
      width: 100%;
      height: 360px;
      .text-box {
        position: absolute;
        left: 250px;
        top: 70px;
        width: 300px;
      }
      .b-title {
        font-size: 32px;
      }
      .p-box {
        margin: 20px 0 45px 0;
        color: $--secondary-text;
      }
      p {
        margin: 10px 0;
      }
      .img {
        width: 100%;
        height: 100%;
      }
      .inner-img {
        position: absolute;
        right: 250px;
        bottom: 16px;
      }
    }
    .business-chain {
      width: 100%;
      height: 420px;
      text-align: center;
      .bc-title {
        padding-top: 80px;
        font-size: 36px;
        margin-bottom: 46px;
      }
      .node-img {
        display: inline-block;
        margin-right: 69px;
        vertical-align: middle;
      }
      .node-text {
        margin-top: 10px;
      }
    }
    .introduce {
      position: relative;
      width: 100%;
      height: 600px;
      text-align: center;
      .i-img {
        width: 100%;
        height: 100%;
      }
      .i-title {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        font-size: 36px;
        margin-bottom: 46px;
      }
      .pos-img {
        width: 378px;
        height: 301px;
      }
      .section {
        position: absolute;
        top: 184px;
        width: 100%;
        padding: 0 290px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
      }
      .text-wrap {
        width: 375px;
      }
      .text-item {
        width: 100%;
        text-align: left;
        margin-bottom: 40px;
      }
      .sub-title {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 16px;
      }
      .text {
        color: $--secondary-text;
        line-height: 24px;
      }
    }
    .flow {
      width: 100%;
      height: 447px;
      text-align: center;
      .f-title {
        padding-top: 80px;
        font-size: 36px;
        margin-bottom: 20px;
      }
      .f-sub-title {
        margin-bottom: 50px;
        color: $--secondary-text;
      }
    }
    .step {
      margin-top: 54px;
      width: 100%;
      .step-node {
        display: inline-block;
      }
      .num-icon {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background-color: $--primary-color;
        color: #fff;
        margin-right: 10px;
      }
      .num-label {
        display: inline-block;
        vertical-align: middle;
        margin-right: 20px;
      }
      .line {
        display: inline-block;
        vertical-align: middle;
        width: 70px;
        height: 1px;
        background-color: $--primary-color;
        margin-right: 20px;
      }
    }
    .cases {
      width: 100%;
      height: 494px;
      text-align: center;
      background-color: $--block-bg;
      .c-title {
        padding-top: 80px;
        font-size: 36px;
        margin-bottom: 50px;
      }
      .grid-wrap {
        display: grid;
        gap: 20px 20px;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 180px;
        .card {
          position: relative;
          height: 230px;
          .img {
            height: 100%;
          }
        }
        .card-text {
          position: absolute;
          bottom: 0px;
          left: 0;
          width: 100%;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background-image: linear-gradient(rgba(48, 101, 185, 0.2), rgba(48, 101, 185, 1));
        }
      }
    }
  }
</style>